<!-- <style>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style> -->

<template>
    <div class="app-container">
        <el-dialog title="今日体温上报" :visible.sync="dialogVisible" width="50%" :before-close="handleClose">

            <el-form ref="form" :model="form" label-width="80px" style="text-align: center;">
                <el-form-item>
                    <span>当前健康状况 : </span>
                    <el-select v-model="form.status" placeholder="请选择当前健康状况">
                        <el-option label="正常" value="正常"></el-option>
                        <el-option label="异常" value="异常"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="">
                    <span>上午9时体温,37℃以下填正常,37℃以上填写实际 : </span>
                    <el-input type="text" v-model="form.morning"></el-input>
                </el-form-item>
                <el-form-item label="">
                    <span>中午12时分体温,37℃以下填正常,37℃以上填写实际 : </span>
                    <el-input type="text" v-model="form.noon"></el-input>
                </el-form-item>
                <el-form-item label="">
                    <span>下午4时体温,37℃以下填正常,37℃以上填写实际 : </span>
                    <el-input type="text" v-model="form.night"></el-input>
                </el-form-item>
                <el-form-item label="健康码:" class="uploadImg">
                    <el-upload class="avatar-uploader" action="http://localhost:8081/upload" :show-file-list="false"
                        :on-success="handleAvatarSuccess" :on-change="onChange" ref="upload">
                        <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>


            </el-form>



            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="onsubmitFrom">确 定</el-button>
        </el-dialog>



        <div class="box">
            <div class="box ordersetting">
                <el-card class="box-card">
                    <div class="boxMain">

                    </div>
                    <div style="text-align: center">
                        请大家认真填写,抗击疫情,从我做起!每天18点前填报当天健康信息。
                    </div>
                </el-card>
                <div class="calendar">
                    <!-- 年份 月份 -->
                    <div class="month">
                        <div class="currentdate">
                            <span class="choose-year">{{ currentYear }}年</span>
                            <span class="choose-month">{{ currentMonth }}月</span>
                        </div>
                        <div class="choose">
                            <span @click="goCurrentMonth(currentYear, currentMonth)" class="gotoday">今天</span>
                            <span @click="pickPre(currentYear, currentMonth)" style="color: blue;">&lt;&lt;</span>
                            <span @click="pickNext(currentYear, currentMonth)" style="color: blue;">&gt;&gt;</span>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                    <!-- 星期 -->
                    <div class="caldate">
                        <ul class="weekdays">
                            <li>周一</li>
                            <li>周二</li>
                            <li>周三</li>
                            <li>周四</li>
                            <li>周五</li>
                            <li>周六</li>
                            <li>周日</li>
                        </ul>
                        <!-- 日期 -->
                        <ul class="days">
                            <!-- v-for循环 每一次循环用<li>标签创建一天 -->
                            <li v-for="dayobject in days">
                                <template>
                                    <!-- 非当前月份 -->
                                    <div class="other-month" v-if="dayobject.day.getMonth() + 1 != currentMonth">
                                        {{ dayobject.day.getDate() }}
                                    </div>
                                    <!-- 当前月 -->
                                    <div class="everyday" v-if="dayobject.day.getMonth() + 1 == currentMonth">
                                        <span class="datenumber">{{ dayobject.day.getDate() }}</span>

                                        <template>
                                            <template v-for="obj in leftobj">
                                                <template v-if="obj.date == dayobject.day.getDate()">
                                                    <template v-if="obj.flag">
                                                        <div class="usual">
                                                            <p>已上报体温</p>
                                                        </div>
                                                    </template>
                                                    <template v-else>
                                                        <div class="fulled">
                                                            <p>体温未上报</p>
                                                        </div>
                                                    </template>
                                                </template>
                                            </template>
                                            <button v-if="dayobject.day <= today" @click="handleOrderSet(dayobject.day)"
                                                class="orderbtn">体温上报</button>
                                        </template>

                                    </div>
                                </template>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
// eslint-disable-next-line no-unused-vars
import { request } from "@/axios/request"
import { dateFormat } from '../../static/css/test/dateUtil'
export default {

    name: "temperature",
    data() {
        return {
            // eslint-disable-next-line no-undef
            imageUrl: '',
            dialogImageUrl: '',
            dialogVisible: false,
            dialogVisible2: false,
            disabled: false,
            form: {
                day: '',
                url: ''
            },
            value: new Date(),
            today: new Date(),//当前日期
            currentDay: 1,
            currentMonth: 1,
            LocalMonth: 1,
            currentYear: 2023,
            currentWeek: 1,
            days: [],
            leftobj: [

            ]//用于装载页面显示的月份已经进行预约设置的数据



        }
    },
    created: function () {//在vue初始化时调用
        this.goCurrentMonth()
        // this.initData(null);
        this.createdData();
    },
    methods: {
        createdData() {
            console.log("this.currentYear = " + this.currentYear)
            request({
                url: "/getAllIsTemperature?date=" + this.currentYear + "-" + this.currentMonth,
                method: "get",
            }).then((res) => {
                this.leftobj = res.data.object
            })
        },

        test() {
            this.createdData();
        },


        onsubmitFrom() {
            request({
                url: "/addTemperature",
                method: "post",
                data: this.form
            }).then((res) => {
                this.$message({
                    message: res.data.msg,
                    type: 'success'
                })
                this.dialogVisible = false;
                this.test();
            });
        },
        onChange(file) {
            if (file) {
                const suffix = file.name.split('.')[1]
                const size = file.size / 1024 / 1024 < 2
                if (['png', 'jpeg', 'jpg'].indexOf(suffix) < 0) {
                    this.$message.error('上传图片只支持 png、jpeg、jpg 格式！')
                    this.$refs.upload.clearFiles()
                    return false
                }
                if (!size) {
                    this.$message.error('上传文件大小不能超过 2MB!')
                    return false
                }
                return file
            }
        },
        handleRemove(file) {
            console.log(file);
            this.dialogImageUrl = null
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible2 = true;
            console.log("add")
        },
        handleDownload(file) {
            console.log(file);
        },
        handleAvatarSuccess(res, file) {
            this.imageUrl = URL.createObjectURL(file.raw);
            console.log(this.imageUrl)
            this.form.url = res.object
            console.log(res.object)
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        },
        //点击报体温
        handleOrderSet(day) {
            this.dialogVisible = true;
            this.form.day = dateFormat(day, 'yyyy-MM-dd hh:mm:ss')
            var today = dateFormat(day, 'yyyy-MM-dd hh:mm:ss');
            console.log(day)
            request({
                url: "/getTemperature/" + today,
                method: "get",
            }).then((res) => {
                if (res.data.stateCode == 200) {
                    this.form = res.data.object
                    this.imageUrl = ''
                    this.imageUrl = `http://localhost:8081/download?name=` + res.data.object.url
                } else {
                    this.form = {};
                    this.form.day = today;
                    this.imageUrl = ''
                }

            });
        },

        //初始化当前页要展示的日期
        initData: function (cur) {
            var date;
            var index = 0;   //控制显示预定的天数
            if (cur) {
                date = new Date(cur);
                console.log("1date = " + date)
            } else {
                var now = new Date();
                console.log("now = " + now)
                var d = new Date(this.formatDate(now.getFullYear(), now.getMonth(), 1));
                d.setDate(35);
                console.log("d= " + d)
                console.log(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1))
                date = new Date(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
                console.log("2date = " + date)
            }
            this.currentDay = date.getDate();
            this.currentYear = date.getFullYear();
            console.log(this.currentYear)
            this.currentMonth = date.getMonth() + 1;
            this.currentWeek = date.getDay(); // //本月第一天是周几（周日0 周六 6）
            var today = new Date();
            this.LocalMonth = today.getMonth() + 1;
            if (this.currentWeek == 0) {
                this.currentWeek = 7;
            }
            var str = this.formatDate(this.currentYear, this.currentMonth, this.currentDay);
            this.days.length = 0;
            // 今天是周日，放在第一行第7个位置，前面6个
            //初始化本周
            for (var i = this.currentWeek - 1; i >= 0; i--) {
                var d = new Date(str);
                d.setDate(d.getDate() - i);
                var dayobject = {};
                dayobject.day = d;
                var now = new Date();
                if (d.getDate() === (now.getDate()) && d.getMonth() === now.getMonth() && d.getFullYear() === now.getFullYear()) {
                    dayobject.index = index++;//从今天开始显示供预定的数量
                }
                else if (index != 0 && index < 3)
                    dayobject.index = index++;//从今天开始3天内显示供预定的数量
                this.days.push(dayobject);//将日期放入data 中的days数组 供页面渲染使用
            }
            //其他周
            for (var i = 1; i <= 35 - this.currentWeek; i++) {
                var d = new Date(str);
                d.setDate(d.getDate() + i);
                var dayobject = {};//dayobject   {day:date,index:2}
                dayobject.day = d;
                var now = new Date();
                if (d.getDate() === (now.getDate()) && d.getMonth() === now.getMonth() && d.getFullYear() === now.getFullYear()) {
                    dayobject.index = index++;
                }
                else if (index != 0 && index < 3)
                    dayobject.index = index++;
                this.days.push(dayobject);
            }


            // this.leftobj = [
            //     { date: 1, number: 120, reservations: 1 },
            //     { date: 3, number: 120, reservations: 1 },
            //     { date: 4, number: 120, reservations: 120 },
            //     { date: 6, number: 120, reservations: 1 },
            //     { date: 8, number: 120, reservations: 1 }
            // ];
        },
        //切换到当前月份
        goCurrentMonth: function (year, month) {
            var d = new Date();
            this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
            this.createdData();
        },
        //向前一个月
        pickPre: function (year, month) {
            // setDate(0); 上月最后一天
            // setDate(-1); 上月倒数第二天
            // setDate(dx) 参数dx为 上月最后一天的前后dx天
            var d = new Date(this.formatDate(year, month, 1));
            d.setDate(0);
            this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
            this.createdData();
        },
        //向后一个月
        pickNext: function (year, month) {
            var d = new Date(this.formatDate(year, month, 1));
            d.setDate(35);////获取指定天之后的日期
            this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
            this.createdData();
        },
        // 返回 类似 2016-01-02 格式的字符串
        formatDate: function (year, month, day) {
            var y = year;
            var m = month;
            if (m < 10) m = "0" + m;
            var d = day;
            if (d < 10) d = "0" + d;
            return y + "-" + m + "-" + d
        }
    }
}
</script>

<style scoped>
.ordersetting .el-input__inner {
    height: 36px;
    line-height: 36px;
}

.ordersetting {
    background: #f5f5f5;
    box-shadow: none;
    border-top: none;
}

.gotoday {
    border: 1px solid #d5d9df
}

.calendar p {
    margin: 0;
}

.filebtn {
    padding: 9px 20px;
    border: none;
    font-size: 18px;
    background: #0ebffc;
}

.month {
    width: 100%;
    line-height: 3;
    /* background: #00B8EC; */
}

.month ul {
    margin: 0;
    padding: 0;
    display: flex;
}

.year-month {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
}

.year-month:hover {
    background: rgba(150, 2, 12, 0.1);
}

.choose-year {
    padding-left: 20px;
    font-size: 1.2rem;
}

.choose-month {
    text-align: center;
    font-size: 1.2rem;
}

.arrow {
    padding: 30px;
}

.arrow:hover {
    background: rgba(100, 2, 12, 0.1);
}

.month ul li {
    color: white;
    font-size: 20px;
    text-transform: uppercase;
    letter-spacing: 3px;
}

.caldate {
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.1), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}

.weekdays {
    margin: 0;
    padding: 0;
    background-color: #fff;
    display: flex;
    flex-wrap: wrap;
    color: #333;
    justify-content: space-around;
    border-bottom: 1px solid #ededed;
    border-top: 2px solid #0ebffc;
}

.weekdays li {
    display: inline-block;
    width: 14%;
    text-align: center;
    padding: 10px 0;
    border-right: 1px solid #f1efef;
    color: #000;
    font-size: 20px;

}

.days {
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;

}

.days li {
    height: 160px;
    list-style-type: none;
    display: inline-block;
    width: 14%;
    text-align: right;
    font-size: 1rem;
    color: #000;
    list-style-type: none;
    display: inline-block;
    width: 14.2%;
    font-size: 1rem;
    color: #000;
    border-bottom: 1px solid #fff;
}

.everyday {
    height: 160px;
    border-bottom: 1px solid #f1efefef;
    position: relative;
    background: #fff;
}

.everyday .datenumber {
    position: absolute;
    right: 10px;
    top: 10px;
}

.everyday .usual {
    height: 100%;
    background: #1ed7fc;
    text-align: center;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 20px;
    line-height: 1.5;
}

.everyday .fulled {
    height: 100%;
    background: #ff9c9d;
    text-align: center;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 20px;
}

.everyday .nochoose {
    height: 100%;
    background: #effbff;
}

.everyday .orderbtn {
    position: absolute;
    right: 10px;
    bottom: 10px;
    cursor: pointer;
    border: none;
    background: #d6ffff;
    padding: 3px 10px;
    color: #0ebffc;
    border-radius: 4px;
    font-size: 16px;
}

.days li .active {
    padding: 6px 10px;
    border-radius: 50%;
    background: #00B8EC;
    color: #fff;
}

.days li .other-month {
    padding: 10px;
    height: 140px;
    color: gainsboro;
    background: #f9f9f9;
}

/* .singlebtn {
        font-size: 18px;
    }
    .mutiplebtn {
        font-size: 18px;
    } */



.filebox {
    position: relative;
}

.el-card__body {
    position: relative;
}

.el-upload--text {
    position: absolute;
    left: 22%;
    top: 14px;
}

.el-upload--text .el-button {
    background: #0ebffc;
    border: none
}

.el-upload-list {
    width: 20%;
}

.filebtns {
    position: relative
}

.multifile {
    width: 100%;
}

.mutibtn {
    position: absolute;
    left: 12%;
    top: 0;
}

.uploadfile {
    padding: 4px 10px;
    height: 20px;
    line-height: 20px;
    position: relative;
    border: 1px solid #999;
    text-decoration: none;
    color: #666;
}

.change {
    position: absolute;
    overflow: hidden;
    right: 0;
    top: 0;
    opacity: 0;
}

.singleuploaded {}

.mutiuploaded {
    left: 31.5%;
}

.outputloaded {
    left: 43%;
}

.inputfile-text {
    height: 33px;
    width: 233px;
    display: inline-block;
    border: 1px solid #ccc;
    line-height: 36px;
    border-radius: 7px;
    cursor: pointer;
}

.inputfile-text span {
    padding-left: 11px;
    color: #aba7a7;
}

.days li .current-month .full {
    background: #ff8a8a;
    text-align: center;
    line-height: 100px;
    color: #fff;

}

.days li .current-month .full .full-text {
    font-size: 26px;
}

.clearfix {
    clear: both
}

.month .currentdate {
    float: left
}

.month .choose {
    float: right;
    line-height: 57px;
    padding-right: 30px;
    color: #676767
}

.month .choose span {
    background: #fff;
    padding: 5px 10px;
    cursor: pointer;
}

/* upload */
.file {
    display: flex;
    width: 60px;
    height: 33px;
    overflow: hidden;
    border: 1px solid #ccc;
    width: 20%;
    margin-top: -4px;
    border-radius: 7px;
    position: relative;
}

.file .defaulttext {
    position: absolute;
    top: 5px;
    left: 10px;
    color: #bdbdbd;
}

.file input {
    width: 100%;
    height: 40px;
    position: relative;
    top: -10px;
    font-size: 0;
    opacity: 0;
    cursor: pointer;
}

.el-card__body #span {
    font-size: 14px;
    padding-left: 20px;
    color: #555;
    margin-top: 10px;
    display: block;
    width: 20%;
}

html,
body {
    /* overflow-y: scroll; */
    margin: 0;
}

a {
    color: #3c8dbc;
    text-decoration: none;
}

/* new style */
.skin-purple .main-sidebar {
    background: #fff;
}

.skin-purple .main-header .logo:hover {
    background: #0abdfe;
}

.skin-purple .main-header .navbar .sidebar-toggle:hover {
    /* background: #0abdfe; */
}

.skin-purple .main-header {
    min-height: 70px;
    padding: 0;
}

.skin-purple .main-header .logo {
    height: 50px;
    /* background: #0abdfe; */
    float: left;
    padding: 20px 0 0 15px;
    /* width: 230px; */
}

.skin-purple .main-header .navbar {
    height: 70px;
    background: linear-gradient(to right, #0abdfe, #67f0e0);
    /* margin-left: 230px; */
}

.winfo {
    margin-left: 230px;
}

.skin-purple .main-header .sidebar-toggle {
    display: inline-block;
    padding: 24px 15px;
    color: #fff;
}

.skin-purple .main-sidebar {
    padding-top: 75px;
}

.sidebar-menu>li {
    line-height: 1.8
}

.skin-purple .sidebar-menu>li>a {
    font-size: 16px;
    color: #666
}

.skin-purple .sidebar-menu>li:hover>a,
.skin-purple .sidebar-menu>li.active>a {
    background: transparent;
    color: #666;
    border-left-color: transparent
}

.skin-purple .treeview-menu>li>a:hover {
    color: #fff
}

.skin-purple .sidebar-menu>li>.treeview-menu {
    background: #fff;
}

.sidebar-menu .treeview-menu>li>a {
    font-size: 16px;
    padding-left: 35px;
    color: #999
}

.sidebar-menu .treeview-menu>li:hover {
    background: #0abdfe;
}

@media (min-width: 768px) {
    .skin-purple .navbar-nav>li>a {
        padding-top: 25px;
        padding-bottom: 25px;
    }
}

.modal-body .nav-tabs>li.active>a,
.nav-tabs>li.active>a:focus,
.nav-tabs>li.active>a:hover {
    color: #0abdfe
}

.modal-body .nav-tabs>li>a {
    color: #555
}

.bg-olive {
    background-color: #0abdfe !important;
}

.dataTable .btn[class*='bg-']:hover {
    box-shadow: none
}

.btn-primary {
    background: #0abdfe;
    border-color: #0abdfe;
}

.box-body .nav>li>a {
    color: #666
}

.box-body .nav>li.active>a {
    color: #0abdfe;
}


/* tab 1*/
.double {
    line-height: 58px;
}

.title .glyphicon {
    padding: 3px;
    font-size: 13px;
    border-radius: 8px;
    color: #fff;

}

.data span.arrowup {
    color: #d88918;
}

.data span.arrowdown {
    color: #6bb10a;
}

.item-blue .glyphicon {
    background-color: #39a9ea;
}

.item-green {
    line-height: 58px;
}

.item-green .glyphicon {
    background-color: #6bb10a;
    line-height: 12px;
}

.item-orange .glyphicon {
    background-color: #d88918;
}

.item-red .glyphicon {
    background-color: #f14f4f;
}

.chart .chart-box {
    margin: 10px;
}

/* 数据表格label */
.content-wrapper .data-type {
    /*width: 90%;*/
    margin: 10px 5px;
    border: 1px solid #d4d4d4;
    border-radius: 2px;
}

.data-type .title,
.data-type .data {
    padding: 3px 12px;
    border-top: 1px solid #d4d4d4;
    overflow: hidden;
    height: 42px;
}

.data-type .title {
    line-height: 34px;
    border-right: 1px solid #d4d4d4;
}

.data-type .data:last-child {
    border-right: 0;
}

.data-type .title {
    text-align: center;
    background: #ececec;
}

.data-type .data .line {
    vertical-align: middle;
    overflow: hidden;
    padding-bottom: 10px;
    padding-top: 10px;
}

/* label行高度 */
.data-type .data>label {
    line-height: 36px;
}

.data-type .data>.form-group {
    line-height: 36px;
}

.data-type .data.text {
    line-height: 36px;
}

/* label行分隔符 */
.data-type .data.border-right {
    border-right: 1px solid #d4d4d4;
}

/* 表格双倍高度 */
.data-type .title.rowHeight2x,
.data-type .data.rowHeight2x {
    height: 84px;
}

.data-type .title.rowHeight2x,
.data-type .data.rowHeight2x.text {
    line-height: 78px;
}

/*.data-type .data.rowHeight2x > label {
        line-height:78px;
    }*/
.data-type .title.editer,
.data-type .data.editer {
    height: 320px;
}

.data-type .title.editer {
    line-height: 300px;
}

/*清除parding*/
.padding-clear {
    padding-right: 0px;
    padding-left: 0px;
}

/* 文件上传 */
/*a  upload */
.a-upload {
    padding: 4px 10px;
    height: 35px;
    line-height: 25px;
    position: relative;
    cursor: pointer;
    color: #888;
    background: #fafafa;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
    display: inline-block;
    *display: inline;
    *zoom: 1
}

.a-upload input {
    position: absolute;
    font-size: 100px;
    right: 0;
    top: 0;
    opacity: 0;
    filter: alpha(opacity=0);
    cursor: pointer
}

.a-upload:hover {
    color: #444;
    background: #eee;
    border-color: #ccc;
    text-decoration: none
}

/* 医疗 */
.search-box {
    display: inline-block
}

.input-sm {
    height: 32px;
}

.btn-create {
    margin-left: 10px;
    background-color: #0abdfe;
    border-color: #0abdfe;
    color: #fff;
}

.btn-create:hover,
.btn-create:active,
.btn-create:focus {
    color: #fff;
}

.pagination {
    margin: 0
}

.medical-modal {
    position: absolute;
    top: 0%;
    left: 0%;
    display: none;
    background: rgba(0, 0, 0, 0.3);
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 9999
}

.medical-modal .content {
    position: absolute;
    left: 35%;
    top: 25%;
    border-radius: 8px;
    width: 30%;
    height: 40%;
    background-color: #fff;
}

.pageitems,
.jump {
    margin-left: 15px;
    display: inline-block;
}

.jumppage {
    width: 30px;
    text-align: center
}

@media (min-width: 768px) {
    .subscribe .modal-dialog {
        width: 900px;
        margin: 30px auto;
    }
}

.checklist {
    margin-top: 10px;
}

.checklist .input-group {
    margin-bottom: 10px;
}

.modal-page {
    margin-top: 20px;
    font-size: 12px;
}

.modal-page .form-control {
    font-size: 12px;
    padding: 0;
    height: 26px;
}

.table-check {
    margin: 0;
    display: inline-block;
    margin-right: 4px;
}

.daterange {
    margin: 10px 10px 0;
}

.daterange .input-group .form-control {
    width: 20%;
}

.chart-title {
    font-size: 16px;
    font-weight: normal;
    text-align: center;
}

.diaocha {
    line-height: 2
}

.diaocha h5 {
    color: #f98d45;
    background: #f5f7f9;
    line-height: 2;
    padding-left: 15px;
}

.diaocha div {
    padding: 0 20px;
    border-bottom: 1px solid #dce1e7;
}

.diaocha div h5 {
    color: #555;
    background: transparent;
    padding-left: 0;
}

.diaocha label {
    font-weight: normal;
}

.diaocha .form-group {
    margin-left: 0;
    margin-right: 0;
}

.diaocha .options label {
    margin-right: 10px;
}

.tizhi button {
    margin-right: 15px;
}

.innerform {
    margin-top: 20px;
}

.fa-search {
    cursor: pointer
}

.line {
    margin-top: 10px;
}

input[type=radio]:focus {
    outline: none
}

input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    display: none
}

label input[type="radio"] {
    content: "\a0";
    display: inline-block;
    vertical-align: middle;
    font-size: 16px;
    width: 15px;
    height: 15px;
    margin-right: .4em;
    border-radius: 50%;
    border: 1px solid #c7c6c6;
    line-height: 1;
    margin-top: -1px;
}

label input[type="radio"]:checked {
    border: 3px solid #0abdfe;
}

.right-menu {
    float: right;
    padding: 18px 30px 0 0;
    color: #fff;
}

.el-dropdown {
    color: #fff;
}

.avatar-wrapper img {
    width: 30px;
    height: 30px;
    border-radius: 15px;
    vertical-align: middle
}

.el-popper[x-placement^=bottom] {
    margin-top: 30px;
}

.el-dropdown-menu__item--divided {
    margin: 0;
    border: 0 none;
    border-bottom: 1px solid #ebeef5
}

.help {
    padding: 0 10px;
}

.help .fa {
    margin-right: 5px;
}

.el-main {
    background: #ecf0f5;
}

.el-menu {
    border: 0 none;
}

.main {
    height: 100vh;
    min-width: 800px;
    min-height: 600px;
    overflow: hidden;
}

.main aside {
    overflow: visible;
    height: 100%;
}

.main aside.isClossTab {
    width: 100%;
    height: 60px;
    cursor: pointer;
    font-size: 25px;
    text-align: center;
    line-height: 60px;
    font-weight: bold;
    border-right: 1px solid #807c7c;
    box-sizing: border-box;
}

.main aside .menu {
    width: 100%;
    border-right: 0;
}

.el-menu .fa {
    vertical-align: middle;
    margin-right: 5px;
    width: 24px;
    text-align: center;
    font-size: 18px;
}

.el-menu-item a {
    color: #303133
}

.el-menu-item:hover,
.el-menu-item.is-active {
    color: #fff;
    background: #0abdfe;
}

.el-menu-item:hover a,
.el-menu-item.is-active a {
    color: #fff;
}

.el-submenu__title:hover {
    background: none;
}

.main-footer {
    background: #fff;
    padding: 15px 0;
    color: #444;
}

/* title */
.content-header {
    position: relative;
    padding: 15px 15px 0 15px;
    /* margin-top: 70px; */
}

.content-header>h1 {
    margin: 0;
    font-size: 24px;
    font-weight: normal;
}

.content-header>h1>small {
    font-size: 15px;
    display: inline-block;
    padding-left: 4px;
    font-weight: 300;
}

.content-header>.breadcrumb {
    float: right;
    background: transparent;
    margin-top: 0;
    margin-bottom: 0;
    font-size: 12px;
    padding: 7px 5px;
    position: absolute;
    top: 20px;
    right: 10px;
    border-radius: 2px;
}

/*  */
.app-container {
    background: #fff;
    /* margin: 15px 30px 15px 15px; */

}

.pagiantion {
    text-align: right;
    padding: 15px;
}

.box {
    position: relative;
    border-radius: 3px;
    background: #ffffff;
    border-top: 3px solid #3c8dbc;
    /* padding: 10px; */
    margin-bottom: 20px;
    width: 100%;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

.filter-container {
    padding: 10px 0 15px 0;
}

.main-container {
    margin-top: 70px;
}

.filter-container .el-button,
.filter-container .el-input__inner {
    padding: 0 15px;
    height: 34px;
    line-height: 34px;
}

.el-aside {
    overflow: hidden;
}

.el-submenu .el-menu-item a {
    display: block;
    height: 50px;
}

.el-menu--collapse .el-submenu__icon-arrow {
    display: none
}

/* .el-container{position: relative;} */
/* foot */
.el-footer {
    position: absolute;
    left: 180px;
    right: 0px;
    bottom: -80px;
}

.boxMain .el-upload--text {
    position: static;
}

.boxMain>div {
    display: inline-block;
}

.excelTitle {
    text-align: center;
    overflow: hidden;
    line-height: 40px;
}

.excelTitle .el-button {
    float: left;
}

.excelTime {
    padding: 10px 0;
    text-align: right;
}

.exceTable {
    width: 100%;
    border-right: 1px solid #e6e6e6;
    border-bottom: 1px solid #e6e6e6;
    font-size: 14px;
    color: #333;
}

.exceTable tr,
.exceTable td {
    border-left: 1px solid #e6e6e6;
    border-top: 1px solid #e6e6e6;
    height: 40px;
    line-height: 40px;
    padding: 0 10px;
}

.exceTable .headBody {
    text-align: center;
    font-weight: 700;
    font-size: 14px;
}

.tabletrBg {
    background: #fcfcfc;
    text-align: right;
}

.textCenter {
    text-align: center
}

.checkScrol {
    height: 277px;
    overflow-y: scroll;
    ;
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>
